<template>
  <el-dialog title="用户操作" :visible.sync="dialogFormVisible" @close='closeDialog'>
      <label>在给UID为<<{{this.dynamicValidateForm.uid}}>>昵称为<<{{this.dynamicValidateForm.userName}}>>的用户添加财富</label>
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="1px" class="demo-dynamic">
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :key="domain.itemId"
        :prop="'domains.' + index + '.itemId'"
        :itemid="domain.itemId"
        :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
      >
        <el-select style="width: 30%" v-model="domain.itemId" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input type="number" style="width: 40%" v-model="domain.itemCount" maxlength="13"></el-input>
        <el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain()">新增域名</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  const one = [{value: '100',label: '禁言'}, {value: '101',label: '解除解封'},{value: '1000', label: '金币'}, { value: '1002',label: 'VIP等级'}, {value: '1003', label: 'VIP经验'}, {value: '1004', label: 'VIP金卡'}, {value: '1005', label: 'VIP银卡'}, {value: '1006', label: 'VIP铜卡'},  {value: '1007', label: '踢人卡'}];
 // const two = [{value: '100',label: '禁言'}, {value: '101',label: '解除解封'},{ value: '1002',label: 'VIP等级'}, {value: '1003', label: 'VIP经验'}, {value: '1004', label: 'VIP金卡'}, {value: '1005', label: 'VIP银卡'}, {value: '1006', label: 'VIP铜卡'}, {value: '1007', label: '踢人卡'}];
  const two = [{value: '100',label: '禁言'}];
  import axios from 'axios'
  export default {
    created() {
      let self = this
      self.getParams()
      if(this.$store.getters.isShow){
        this.options = one;
      }else {
        this.options = two
      }
    },
    watch: {
      '$route': 'getParams'
    },
    data() {
      return {
        options: [],
        dynamicValidateForm: {
          domains: [{
            itemId: '',
            itemCount: '0'
          }],
          uid: '',
          userName: ''
        },
        dialogFormVisible: true,
        enterScenes : ''
      };
    },
    methods: {
      closeDialog(){

        if(this.enterScenes === 'home'){
          this.$router.push({path : '/online'});
        }else if(this.enterScenes === 'userInfo'){
          this.$router.push({path : '/userInfo'});
        }else if(this.enterScenes === 'userLog'){
          this.$router.push({path : '/userLog'});
        }else if(this.enterScenes === 'userList'){
          this.$router.push({path : '/userList'});
        }
      },
      getParams () {
        this.dynamicValidateForm.uid = this.$route.query.uid
        this.dynamicValidateForm.userName = this.$route.query.userName
        this.enterScenes = this.$route.query.scenes
        // 如果是params 传参，那就是this.$route.params.site
      },
      submitForm(formName) {
        console.log(this.dynamicValidateForm)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post("/addresource",this.dynamicValidateForm).then(resp => {
              if(resp.data.result){
                alert('submit!');
                if(this.enterScenes === 'home'){
                  this.$router.push({path : '/online'});
                }else if(this.enterScenes === 'userInfo'){
                  this.$router.push({path : '/userInfo'});
                }else if(this.enterScenes === 'userLog'){
                  this.$router.push({path : '/userLog'});
                }
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

<style scoped>

</style>
